/**
* 左边菜单
*/ 
<template>
  <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#334157" text-color="#bfcbd9" router
    unique-opened :collapse="collapsed" collapse-transition active-text-color="#685cf5">
    <div class="logobox" @click="backToIndex()">
      用户中心
    </div>
    <el-menu-item index="/user">
      <i class="el-icon-menu"></i>
      <span slot="title">控制面板</span>
    </el-menu-item>

    <el-menu-item index="/personal">
      <i class="el-icon-document"></i>
      <span slot="title">测评报告</span>
    </el-menu-item>
    <el-menu-item index="/user/setting">
      <i class="el-icon-setting"></i>
      <span slot="title">用户设置</span>
    </el-menu-item>

    <!-- 仅当是管理员时候才会有管理菜单 -->
    <el-menu-item index="/user/admin" v-if="superadmin">
        <i class="el-icon-s-custom"></i>
        <span>用户管理</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'LeftNav',
  props: {
    collapsed: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    collapsed: {
      handler(newValue, oldValue) {
      },
      deep: true,
      immediate: true
    },
    superadmin: {
      handler(newValue, oldValue) {
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      superadmin: false,
      logourl: null,
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    if(this.$store.state.User.email == 'ADMIN'){
      this.superadmin = true
    }
  },
  methods: {
    backToIndex: function () {
      this.$router.push({ path: "/" });
    }
  }
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}

.el-menu-item-group__title {
  padding: 0px;
}

.el-menu-bg {
  background-color: #1f2d3d !important;
}

.el-menu {
  border: none;
}

.logobox {
  height: 40px;
  line-height: 40px;
  /* color: #9d9d9d; */
  color: #fff;
  background: #2b2f3a;
  font-size: 20px;
  text-align: center;
  padding: 5px 0px;
  margin: 0 auto;
  padding-right: 3px;

}

.logoimg {
  height: 40px;
  margin: 0 auto;
}
</style>
